<template>
  <a-drawer :open="visible" title="订货单详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <template #extra>
      <a-space :size="5">
        <span>{{ options.no }}</span>
        <span>{{ options.dealer?.name }}</span>
        <span>业务员：{{ options.salesman?.rename }}</span>
        <span>{{ options.create_time }}</span>
        <a-button type="link" @click="changeLogModal(true)">查看日志</a-button>
        <a-button @click="print">
          <template #icon>
            <PrinterOutlined />
          </template>
          打印({{ options?.printLog?.print_count ?? 0 }})
        </a-button>
      </a-space>
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="单据编号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ options.store?.store_name }}</a-descriptions-item>
        <a-descriptions-item label="所属片区">{{ options.store?.region?.name }}</a-descriptions-item>
        <a-descriptions-item label="业务员">{{ options.salesman?.rename }}</a-descriptions-item>
        <a-descriptions-item label="入库仓库">{{ options.warehouse?.name }}-{{ getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', options.warehouse?.attribute_type) }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">
          <span>{{ getDescByValue('PROGRESS_STABAR_ENUM', options.status) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="结算方式">
          <span>{{ getDescByValue('RECEIVE_TYPE_ENUM', options.payment_type) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="订单来源">
          <span>{{ getDescByValue('UNSETYLED_TYPE_ENUM', options.source) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="配送方式">
          <span>{{ getDescByValue('UNSHIPPED_TYPE_ENUM', options.is_self) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="订单备注">{{ options.remark }}</a-descriptions-item>
        <a-descriptions-item label="单据日期">{{ options.create_time }}</a-descriptions-item>
        <a-descriptions-item label="创建者">{{ options.creator?.username }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" title="签收信息">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="结算方式">{{ PaymentType[options?.sign?.payment_type] }}</a-descriptions-item>
            <a-descriptions-item label="收款方式">
              <template v-if="options?.sign?.payment_type !== 2 && options?.sign?.payment_type !== 3">
                {{ PaymentModel[options?.sign?.payment_model] || '' }}
              </template>
            </a-descriptions-item>
            <a-descriptions-item label="订单金额">{{ options?.discounted_amount }}</a-descriptions-item>
            <a-descriptions-item label="订单数量">{{ options?.order_number }}</a-descriptions-item>
            <a-descriptions-item label="签收金额">{{ options?.received_amount }}</a-descriptions-item>
            <a-descriptions-item label="签收数量">
              <span :style="{ color: options.status == 4 && options?.received_number !== options?.order_number ? 'red' : 'inherit' }">{{ options?.received_number }}</span></a-descriptions-item
            >
            <a-descriptions-item label="签收时间">{{ options?.sign?.create_time }}</a-descriptions-item>
            <a-descriptions-item label="签收备注">{{ options?.sign?.remark }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image-preview-group>
            <div v-for="item in options?.sign?.certificate.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="options?.sign?.certificate ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="smart-margin-top10" size="small" title="商品明细">
      <GoodsInventoryTable :enterpriseId="options.detail" />
    </a-card>
    <LogModal v-model:open="showLogModal" @close="changeLogModal(false)" :tableData="options.relatedLog" />
    <GoodsPrintModal ref="printRef" />
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import GoodsPrintModal from './goods-print-modal.vue'
import GoodsInventoryTable from './goods-Inventory-table.vue'
import { useEnums } from '@/hooks/plugins/useEnums'
import { salesApi } from '@/api/business/sale/sales-api'
import { errorSentry } from '@/lib/error-sentry'

import failImg from '@/assets/images/notice/failImg.png'

const { getDescByValue } = useEnums()
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])
const enum PaymentType {
  '现结' = 1,
  '欠款',
  '预付款',
  '0元赠',
  '押金'
}

const enum PaymentModel {
  '现金' = 1,
  '微信',
  '支付宝',
  '公司账户'
}

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options: any = ref({})

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}

const showLogModal = ref(false)
function changeLogModal(status: boolean) {
  showLogModal.value = status
}

const printRef = ref()
async function print() {
  try {
    const res = await salesApi.detail({ id: options.value.id })
    printRef.value.showDrawer(res.data)
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  }
}
</script>
